<template>
  <div>
    <el-card style="margin:20px 0">
      <Categoryselect :show="scene!=0" @getcategoryId="getcategoryId" />
    </el-card>
    <el-card style="margin:20px 0">
      <!-- 底部由三个部分进行切换 -->
      <div v-show="scene===0">
        <!-- spu列表结构 -->
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加spu</el-button>
        <el-table border width="100%" :data="records">
          <el-table-column label="序号" width="80" type="index" align="center" />
          <el-table-column label="SPU名称" width="width" prop="spuName" />
          <el-table-column label="SPU描述" width="width" prop="description" />
          <el-table-column label="操作" width="width" prop="prop">
            <template slot-scope="{row,$index}">
              <hint-button type="success" icon="el-icon-plus" size="mini" title="添加sku" @click="addSku(row)" />
              <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click="upDataSpu(row)" />
              <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前sku全部spu列表" @click="handlerSkuList(row)" />

              <el-popconfirm title="确定删除spu吗？" @onConfirm="deleSpu(row)">
                <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu" slot="reference" />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="page" :page-sizes="[3, 5, 10,]" :page-size="limit" layout=" prev,pager,next,jumper,->,sizes,total" :total="total" background style="text-align:center" @size-change="sizeChange" @current-change="getSpuList" />

      </div>
      <!-- 添加/修改spu页面 -->
      <SpuForm v-show="scene===1" @changeScene="changeScene" ref="spu" />
      <!-- 添加sku页面 -->
      <SkuForm v-show="scene===2" @changeScene_sku="changeScene_sku" ref="sku" />
    </el-card>
    <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="beforeClose">
      <el-table :data="skuList" width="100%" v-loading="loading">
        <el-table-column prop="skuName" label="名称" width="150"></el-table-column>
        <el-table-column prop="price" label="价格" width="200"></el-table-column>
        <el-table-column prop="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" alt="" style="widh:100px;height:100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import SpuForm from './SpuForm'
import SkuForm from './SkuForm'
import { done } from 'nprogress'
export default {
  name: 'Spu',
  components: {
    SpuForm,
    SkuForm
  },
  data() {
    return {
      dialogTableVisible: false,
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 控制三级联动的可操作性性
      show: true,
      page: 1, // 当前第几页
      limit: 3, // 每一页需要展示多少条数据
      records: [], // 存储spu列表数据
      total: 0,
      // 用于控制底部三个部分的显示隐藏
      scene: 0, // 0代表展示spu列表数据 1 代表展示添加/修改SPU 2代表添加sku
      spu: {},
      skuList: [],
      loading: true
    }
  },
  methods: {
    async getSpuList(pages = 1) {
      this.page = pages
      const { page, limit, category3Id } = this
      const result = await this.$API.spu.reqSpuList(page, limit, category3Id)
      if (result.code === 200) {
        this.total = result.data.total
        this.records = result.data.records
      }
    },
    getcategoryId({ categoryID, level }) {
      if (level === 1) {
        this.category1Id = categoryID
        this.category2Id = ''
        this.category3Id = ''
      } else if (level === 2) {
        this.category2Id = categoryID
        this.category3Id = ''
      } else {
        this.category3Id = categoryID
        this.getSpuList()
      }
    },
    currentPage() {},
    // 条数发生变化
    sizeChange(limit) {
      // console.log(limit)
      this.limit = limit
      this.getSpuList()
    },
    addSpu() {
      this.scene = 1
      this.$refs.spu.addSpuData(this.category3Id)
    },
    upDataSpu(row) {
      this.scene = 1
      this.$refs.spu.initSpuData(row)
    },
    // spu取消按钮
    changeScene({ scene, flag }) {
      this.scene = scene
      if (flag === '修改') {
        this.getSpuList(this.page)
      } else {
        this.getSpuList()
      }
      // console.log(val)
    },
    // sku取消按钮
    changeScene_sku(scene) {
      this.scene = scene
      // 防止数据回显
      Object.assign(this._data, this.$options.data())
    },
    // 删除spu
    async deleSpu(row) {
      let result = await this.$API.spu.reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1)
      }
    },
    // 添加sku
    addSku(row) {
      this.scene = 2
      this.$refs.sku.getData(this.category1Id, this.category2Id, row)
    },
    // 查看sku按钮的回调
    async handlerSkuList(row) {
      this.dialogTableVisible = true
      this.spu = row
      let result = await this.$API.spu.reqSkuList(row.id)
      // console.log(result, '===')
      if (result.code === 200) {
        this.skuList = result.data
        this.loading = false
      }
    },
    // DIALOG关闭前的回调
    beforeClose(down) {
      this.loading = true
      this.skuList = []
      down()
    }
    // 但前页
    /*   currentChange(page) {
      console.log(page)
      this.page = page
      this.getSpuList()
    } */
  }
}
</script>

<style>
</style>
